<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: tomato;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>

<div>
    <button>单击按钮</button>
</div>

<script>

    var div = document.getElementsByTagName('div')[0]
    var btn = document.getElementsByTagName('button')[0]

    // 绑定单击事件
    // div.onclick = function (){
    //     console.log('div click')
    // }

    // 鼠标移出
    // div.onmouseout = function (){
    //     console.log('div')
    // }


    // 鼠标移出   不存在事件冒泡
    div.onmouseleave = function (){
        console.log('div')
    }

    // 事件函数被调用时会默认传入事件对象
    // btn.onclick = function (event){
    //     // 阻止事件的冒泡行为
    //     event.stopPropagation()
    //     console.log('btn click')
    // }

    // btn.onmouseout = function (){
    //     console.log('btn')
    // }

    btn.onmouseleave = function (){
        console.log('btn')
    }

    /*
    *    现象:  按钮和div区域分别绑定了单击事件
    *    当按钮被单击时div区域的单击事件也被触发 该现象是事件冒泡行为
    *    事件的执行阶段:
    *       1. 事件捕获
    *       2. 事件执行
    *       3. 事件冒泡
    * */

</script>
</body>
</html>